@import './common';

.imgs{
	box-sizing:border-box;
	padding:setSize(20) setSize(100) setSize(20) setSize(30);

	.img-box{
		width: setSize(190);
		height: setSize(190);
		min-width: setSize(190);
		min-height: setSize(190);
		box-sizing:border-box;
		padding:setSize(4);

		.img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.img-box1{
		width: setSize(300);
		box-sizing:border-box;
		padding:setSize(4);

		.img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}

.list-item{

	.list-head{
		position:relative;
		box-sizing:border-box;
		padding:setSize(10) setSize(37);
		background-color:$thirdBgWin;

		.icon-box{

			.icon{
				display: block;
				width: setSize(80);
				height: setSize(80);
				border-radius:50%;
			}
		}

		.text{
			box-sizing:border-box;
			padding:0 setSize(10);
			@include ellipsis;
		}

		.btn{
			width: setSize(120);
			line-height: setSize(44);
			border:setSize(1) solid $mainColor;
			border-radius:setSize(100);
			font-size: setSize(30);
			background-color:$mainColor;
			color: #332F36;
			text-align: center;
		}

		.btn-default{
			color:#999;
			border-color:#999;
			background-color:$thirdBgWin;
		}
	}

	.article{
		line-height: setSize(46);
		box-sizing:border-box;
		padding:setSize(20) setSize(40);

		.flag{
			color: #fe5c21;
		}

		.text{
			display: inline;
		}

		.text-active{
			color: $mainColor;
		}
	}

	.time{
		box-sizing: border-box;
		padding:setSize(10) setSize(30) 0;
		font-size: setSize(22);
		color: #999;
	}

	.tags{
		box-sizing:border-box;
		padding:setSize(20) setSize(40);

		.tag{
			display: inline-block;
			max-width: setSize(400);
			line-height: setSize(40);
			padding:0 setSize(20);
			margin-right:setSize(16);
			margin-bottom:setSize(16);
			border-radius:setSize(50);
			text-align: center;
			font-size: setSize(28);
			color: #333;
			background-color:$mainColor;
			@include ellipsis;
		}
	}

	.list-foot{
		box-sizing:border-box;
		padding:setSize(25) setSize(40);
		font-size: setSize(22);

		.icon-box{
			position: relative;
			padding-top: setSize(10);
			padding-bottom: setSize(10);
			padding-left: setSize(10);
			padding-right: setSize(32);

			.icon{
				display: block;
				width: setSize(40);
				height: setSize(40);
			}

			.share{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				opacity:0;
			}

			.text{
				position:absolute;
				top:setSize(-10);
				right: setSize(-30);
				width:setSize(60);
				color: #CECECE;
			}
		}
	}
}

.coms-wrap{
	box-sizing:border-box;
	padding:0 setSize(30) setSize(20);

	.com-item{
		margin-bottom: setSize(10);
		font-size: setSize(28);
	}

	.coms-box{
		box-sizing:border-box;
		padding:setSize(20);
		background-color:$subBgWin;
		border-radius:setSize(5);

		.link{
			font-size: setSize(26);
			color: #e8683b;

			.cell-icon{
				align-items:center;
				box-sizing:border-box; 	
				padding-right:setSize(10);
				margin-left: setSize(4);

				.icon{
					width: setSize(16);
					height: setSize(16);		
					display: inline-block;
					box-sizing:border-box; 
					border-right: setSize(4) solid #e8683b; 
					border-top: setSize(4) solid #e8683b;   
					transform: rotate(45deg); 
				}
			}
		}
	}
}

.foot-wrap{
	height: setSize(102);

	.foot-box{
		position: fixed;
		left: 0;
		bottom:0;
		width: 100%;
		height: setSize(102);
		box-sizing:border-box;
		padding:setSize(16) setSize(38);
		z-index: 999;
		background-color:$subBgWin;
		box-shadow:setSize(0) setSize(3) setSize(21) setSize(0) rgba(0, 0, 0, 0.35);

		.avat-box{

			.avat{
				display: block;
				width: setSize(60);
				height: setSize(60);
				border-radius:50%;
			}
		}

		.input-box{
			box-sizing:border-box;
			padding:setSize(10) setSize(30);
			border:setSize(2) solid #999999;
			margin-left:setSize(27);
			margin-right:setSize(38);
			border-radius:setSize(50);

			.input{
				display: block;
				width: 100%;
				height: setSize(36);
				min-height:setSize(36);
			}
		}

		.btn-box{
			position:relative;
			color: $mainColor;

			.btn{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				opacity:0;
			}
		}
	}
}